<template>
  <div class="channel-list">
      <div v-for="item in channels" :key="item.id" class="item">
          <Channel @active="$emit('active',item.id)" :isActive="item.id === activeId" :data="item"/>
      </div>
  </div>
</template>

<script>
import Channel from './Channel.vue';
import channelServ from '../services/channel.js';
export default {
    components: {
        Channel,
    },
    props: ['activeId'],
    data(){
        return {
            channels: [],
        }
    },
    async created() {
        let datas = await channelServ.getChannels();
        this.channels = datas.filter(item => item.name !== '热门');
    }
}
</script>

<style scoped>
    .channel-list{
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .item{
        width: 50%;
        font-weight: 600;
    }
</style>